<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="demo.css" rel="stylesheet">
    <title>简单的例子</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <fieldset>
        <legend>新增人员</legend>

        <div class="form-group">
            <label>姓名:</label>
            <input type="text" v-model="newPerson.name"/>
        </div>

        <div class="form-group">
            <label>年龄：</label>
            <input v-model="newPerson.age">
        </div>
        <div class="form-group">
            <label>Sex:</label>
            <select v-model="newPerson.sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div class="form-group">
            <label></label>
            <button @click="createPerson">创建</button>
        </div>
    </fieldset>

    <table>
        <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(p, index) in people">
            <td>{{p.name}}</td>
            <td>{{p.age}}</td>
            <td>{{p.sex}}</td>
            <td class="text-center">
                <button @click="deletePerson(index)">删除</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            newPerson: {
                name: '',
                age: 0,
                sex: '男'
            },
            people: []
        },
        methods: {
            createPerson: function () {
                this.people.push(this.newPerson);
                // 添加完newPerson对象后，重置newPerson对象
                this.newPerson = {name: '', age: 0, sex: '男'}
            },
            deletePerson: function (index) {
                this.people.splice(index, 1);
            }
        }
    });
</script>
</body>
</html>